<template>
	<view class="technician-page">
		<view class="header">
			<uv-search placeholder="请输入搜索内容" v-model="keyword" @search="search" @custom="search"></uv-search>
			<Healthclass :healthType="healthType" @onChange="classChage" :index='index'></Healthclass>
		</view>
		<view class="uv-list-box flex-grow-1">
			<scroll-view @refresherrefresh="onRefresh" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
				@scrolltolower="lower" @scroll="scroll" @refresherpulling="onPulling" :refresher-enabled="true"
				:refresher-triggered="triggered">
				<view class="good-list">
					<GoodItem v-for="item in dataList" :item="item" :key="item" />
				</view>
				<uv-loading-icon v-if="isLoading"></uv-loading-icon>
				<view class="noInfo" v-if="isMore">
					没有更多数据啦~
				</view>
			</scroll-view>
		</view>
		<FootTabbar :currentIndex="2"></FootTabbar>
	</view>
</template>

<script>
	import GoodItem from '@/components/goods-item/goods-item.vue'
	import Healthclass from '@/components/Healthclass/Healthclass'
	export default {
		components: {
			GoodItem,
			Healthclass
		},
		data() {
			return {
				scrollTop: 0,
				triggered: false,
				freshing: true,
				list: [{
					name: '全部',
				}, {
					name: '足疗服务',
				}, {
					name: '理疗服务 '
				}],
				healthType: null,
				dataList: [],
				isLoading: false,
				pageSize: 10,
				pageNum: 1,
				isMore: false,
				keyword: null,
				index: 0,
			}
		},
		onLoad(option) {
			this.healthType = option.type
			this.index = option.index
			this.getdata()
		},
		mounted() {},
		onShow() {
			uni.hideTabBar();
		},
		methods: {
			// 分类选择
			classChage(e) {
				this.healthType = e
				this.getdata()
			},
			search() {
				console.log(this.keyword)
				this.getdata()
			},
			getdata() {
				this.pageNum = 1
				this.dataList = []
				this.getList()
				this.hasNext = true
				this.isLoading = true
			},
			async getList() {
				const {
					rows,
					code,
					total
				} = await this.muajax.getService({
					healthType: this.healthType ? this.healthType : '',
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					serviceName: this.keyword ? this.keyword : ''
				});
				if (code == 200) {
					this.triggered = false;
					this.isLoading = false
					this.dataList = this.dataList.concat(rows)
					this.total=total
					if(rows.length<this.pageSize||this.total==this.dataList.length){
						this.hasNext = false
					}

				}
			},
			lower: function(e) {
				// console.log(e)
				if (!this.hasNext) {
					this.isMore = true
					return
				}
				this.pageNum++
				this.getList()
			},
			// 滚动监听
			scroll: function(e) {
				// console.log(e)
			},
			// 下拉被触发
			onPulling(e) {
				this.triggered = true
				this.getdata()
				this.scrollTop = 0
				this.isLoading = false
			},
			onRefresh() {
				setTimeout(() => {
					this.triggered = false;
				}, 3000)
			},
			goTop: function(e) {
				// 滚动到顶部
				// 解决view层不同步的问题
				// this.scrollTop = this.old.scrollTop
				// this.$nextTick(function() {
				// 	this.scrollTop = 0
				// });
				// uni.showToast({
				// 	icon: "none",
				// 	title: "纵向滚动 scrollTop 值已被修改为 0"
				// })
			},
			click(item) {
				this.show = true
				console.log('item', item);
			},
			// 二级选择
			tWOChang() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background: #f1f1f1;

	}

	.noInfo {
		text-align: center;
		color: #666;
	}

	.header {
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		// height: 200px;
		border-bottom: 1px solid #f1f1f1;
		position: relative;
		z-index: 99;
	}

	.technician-page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		.uv-list-box {
			overflow: hidden;
		}
	}

	.scroll-Y {
		height: 100%;
		overflow-y: scroll;
	}
</style>